<template>
  <div class="views-container">
    <div class="dashboard-editor-container">
      <div v-if="!serviesFlag && !errorFlag">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="审计总计"
            name="1"
          >
            <el-form
              :inline="true"
              label-width="200px"
              style="margin-left:10%"
            >
              <el-form-item label="查询日期(默认三天):">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  @change="showTime"
                />
              </el-form-item>
              <el-form-item label="组件:">
                <el-radio-group
                  v-model="module"
                  placeholder="请选择组件"
                  @change="changeComponent"
                >
                  <el-radio-button
                    v-for="val in moduleList"
                    :label="val"
                    :value="val"
                  />
                </el-radio-group>
              </el-form-item>
              <!-- <el-button size="mini" type="primary" @click="queryAll">查询</el-button> -->
            </el-form>
            <div style="display:flex;flex-wrap:wrap">
              <el-card style="margin-top:10px;width:50%">
                <div class="title-row">
                  <span class="title-row-bar" />组件审计汇总
                </div>
                <div
                  v-if="activeName=='1'"
                  id="alarm"
                  style="width:100%;height:300px"
                />
              </el-card>
              <el-card style="margin-top:10px;width:50%">
                <div class="title-row">
                  <span class="title-row-bar" />组件详情
                </div>
                <div class="head-container">
                  <crudOperation
                    show=""
                    :permission="permission"
                  />
                  <pagination />
                </div>
                <el-table
                  ref="table"
                  v-loading="crud.loading"
                  :data="crud.data"
                  max-height="300px"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                  />
                  <el-table-column
                    label="父集群"
                    prop="cmName"
                  />
                  <el-table-column
                    label="子集群"
                    prop="clusterName"
                  />
                  <el-table-column
                    label="查询类型"
                    prop="type"
                  />
                  <el-table-column
                    label="当日告警次数"
                    prop="count"
                  />
                  <el-table-column
                    label="时间"
                    prop="createTime"
                  />
                </el-table>
              </el-card>
              <el-card style="margin-top:10px;width:50%">
                <div class="title-row">
                  <span class="title-row-bar" />模型审计汇总
                </div>
                <el-form
                  :inline="true"
                  label-width="100px"
                >
                  <el-form-item label="模型名称:">
                    <el-select
                      v-model="model"
                      placeholder="请选择模型"
                      @change="checkModel"
                    >
                      <el-option
                        v-for="val in modelList"
                        :label="val"
                        :value="val"
                      />
                    </el-select>
                  </el-form-item>
                </el-form>
                <div
                  v-if="activeName=='1'"
                  id="moduleMap"
                  style="width:100%;height:300px"
                />
              </el-card>
              <el-card style="margin-top:10px;width:50%">
                <div class="title-row">
                  <span class="title-row-bar" />模型详情
                </div>
                <modelTable :model-data="modelData" />
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="语句查看"
            name="2"
          >
            <anomaly v-if="activeName=='2'" />
          </el-tab-pane>
          <el-tab-pane
            label="模型配置"
            name="3"
          >
            <module v-if="activeName=='3'" />
          </el-tab-pane>
        </el-tabs>
      </div>
      <servies
        v-if="serviesFlag"
        :row-data="rowData"
        @center="center"
      />
      <errorData
        v-if="errorFlag"
        @server="server"
      />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import servies from './servies.vue'
import errorData from './indicators.vue'
import module from '../modelConfig/index.vue'
import audit from '@/api/phaseTwo/audit.js'
import anomaly from './anomalyModel.vue'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import modelTable from './modelTable.vue'
import pagination from '@crud/Pagination'
const defaultCrud = CRUD({
  title: '组件详情',
  url: '/api/cmStatementAudit/selectComponentDetails',
  queryOnPresenterCreated: false
})
export default {
  components: {servies, errorData, module, anomaly, crudOperation, rrOperation, udOperation, modelTable, pagination},
  mixins: [presenter(defaultCrud), header(), crud()],
  data() {
    return {
      serviesFlag: false,
      rowData: {},
      errorFlag: false,
      activeName: '1',
      module: 'IMPALA',
      moduleList: ['IMPALA', 'YARN'],
      model: '',
      modelList: [],
      value1: [this.getTime(new Date() - 2 * 24 * 60 * 60 * 1000).slice(0, 10) + ' 00:00:00', this.getTime(new Date())],
      changeFlag: false,
      changeBox: [],
      pickerMinDate: null,
      pickerMaxDate: null,
      pickerOptions: {
        disabledDate(time) {
           	const curDate = (new Date()).getTime()
           	const three = 15 * 24 * 3600 * 1000
          	const threeMonths = curDate - three
          return time.getTime() > Date.now() || time.getTime() < threeMonths
        }
      },
      nameList: [],
      xData: [],
      seriesData: [],
      modelMapName: [],
      modelX: [],
      modelSeriesData: [],
      permission: {
        add: ['add'],
        edit: ['edit'],
        del: ['del']
      },
      startTime: this.getTime(new Date() - 2 * 24 * 60 * 60 * 1000).slice(0, 10) + ' 00:00:00',
      endTime: this.getTime(new Date()),
      modelData: {startTime: '', endTime: '', module: ''}
    }
  },
  watch: {
    serviesFlag() {
      this.$nextTick(() => {
        this.alarmEch()
        this.moduleMap()
      })
    },
    errorFlag() {
      this.$nextTick(() => {
        this.alarmEch()
        this.moduleMap()
      })
    }
  },
  created() {
    this.initData()
    this.modelData.startTime = this.startTime
    this.modelData.endTime = this.endTime
    this.modelData.module = this.module
  },
  mounted() {
    this.$nextTick(() => {
      this.getAlarm()
      this.getModelName()
    })
  },
  methods: {
    details(row) {
      this.rowData = row
      this.serviesFlag = true
    },
    initData() {
      this.query.type = this.module
      this.query.startTime = this.startTime
      this.query.endTime = this.endTime
      this.crud.refresh()
    },
    center(val) {
      this.serviesFlag = val
    },
    errorDetail() {
      this.errorFlag = true
    },
    server(val) {
      this.errorFlag = val
    },
    alarmEch() {
      var chartDom = document.getElementById('alarm')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '服务集群告警趋势',
          textStyle: { fontSize: 15 }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          data: this.nameList,
          top: '7%'
        },
        xAxis: {
          type: 'category',
          data: this.xData,
          offset: 30,
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: this.seriesData
      }

      option && myChart.setOption(option)
    },
    handleClick(data) {
      if (data.index == '0') {
        this.$nextTick(() => {
          this.alarmEch()
          this.moduleMap()
        })
      }
    },
    moduleMap() {
      var chartDom = document.getElementById('moduleMap')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '模型采用趋势',
          textStyle: { fontSize: 15 }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          data: this.modelMapName,
          top: '7%'
        },
        xAxis: {
          type: 'category',
          data: this.modelX,
          offset: 30,
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: this.modelSeriesData
      }

      option && myChart.setOption(option)
    },
    changeClose() {
      this.changeFlag = false
    },
    handleClicks(data) {

    },
    getAlarm() {
      const formData = new FormData()
      formData.append('type', this.module)
      formData.append('startTime', this.startTime)
      formData.append('endTime', this.endTime)
      audit.getAlarm(formData).then((res) => {
        this.nameList = res.nameList
        this.xData = res.timeList
        this.seriesData = res.series
        this.alarmEch()
      })
    },
    // queryAll(){
    //   this.getAlarm()
    //   this.modelData.startTime=this.startTime
    //   this.modelData.endTime=this.endTime
    //   this.modelData.module=this.module
    //   this.query.type = this.module
    //   this.query.startTime=this.startTime
    //   this.query.endTime=this.endTime
    //   this.crud.refresh()
    //   this.getModelMap()
    // },
    showTime() {
      this.startTime = this.value1[0]
      this.endTime = this.value1[1]
      this.getAlarm()
      this.modelData.startTime = this.startTime
      this.modelData.endTime = this.endTime
      this.modelData.module = this.module
      this.query.type = this.module
      this.query.startTime = this.startTime
      this.query.endTime = this.endTime
      this.crud.refresh()
      this.getModelMap()
    },
    getTime(time) {
      var date = new Date(time)
      const Y = date.getFullYear()
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      const h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
    },
    getModelName() {
      const formData = new FormData()
      formData.append('component', this.module)
      audit.getModelName(formData).then((res) => {
        this.modelList = res
        this.model = res[0]
        this.getModelMap()
      })
    },
    getModelMap() {
      const formData = new FormData()
      formData.append('type', this.module)
      formData.append('startTime', this.startTime)
      formData.append('endTime', this.endTime)
      formData.append('modelName', this.model)
      audit.getModelMap(formData).then((res) => {
        this.modelMapName = res.nameList
        this.modelX = res.timeList
        this.modelSeriesData = res.series
        this.moduleMap()
      })
    },
    changeComponent() {
      this.getModelName()
      this.getAlarm()
      this.modelData.startTime = this.startTime
      this.modelData.endTime = this.endTime
      this.modelData.module = this.module
      this.query.type = this.module
      this.query.startTime = this.startTime
      this.query.endTime = this.endTime
      this.crud.refresh()
      this.getModelMap()
    },
    checkModel() {
      this.getModelMap()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}
.content1 {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fafafa;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 14px;
}
.content2 {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 14px;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main{
  margin-top:5px;
  border:1px solid #dedede;
  box-shadow: 2px 1px 7px 1px #cdcdd1;
}
.title{
  font-size: 14px;
  text-align: center;
  margin-top:10px;
  color: #000;
}

</style>
